<template>
  <div id="app">
    <div>
      <NavBar/>
    </div>
    address: {{$store.state.userInfo.userInfo.address}}
    <br/>
    address: {{userInfo.address}}
    <br/>
    doubleNum: {{doubleNum}}
    <br/>
    totalMoney:{{totalMoney}}

    num: {{ $store.state.num }} <br/>
    num: {{ num }}
    name：{{ $store.state.userInfo.userInfo.name}}
    爱好：{{ $store.state.userInfo.userInfo.skills}}

    <!-- <img :src="$store.state.userInfo.logo"/> -->

    <button @click="hDoubleNum">num*2</button>
    <button @click="hUpdateLogo">修改图片</button>
    <button @click="$store.commit('userInfo/setSkill',['看书'])">修改爱好</button>
    <button @click="$store.dispatch('books/getBooks')">请求图书</button>
    <button @click="getBooks()">请求图书-mapAction</button>
    <button @click="$store.dispatch('action1', [1,2,3])">调用action</button>
    <hr>
    <!-- 图书 -->
    <div v-for="(item,idx) in $store.state.books" :key="idx">
      {{item}}
    </div>
    <p>总价：xxx {{ $store.getters["books/totalMoney"] }}</p>


    
  </div>
</template>

<script>
// import axios from 'axios'
import NavBar from './components/NavBar.vue'

import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
console.log(mapState)
console.log(mapState(['num'] ))
export default {
  name: 'App',
  data () {
    return {
      num: 200
    }
  },
  computed: {
    c1: function () {
      return 100
    },
    ...mapGetters(['doubleNum']),
    // ...mapState(['num'])
    ...mapState({money: 'num'}),

    ...mapState('userInfo',['userInfo'] ),

    ...mapGetters('books', ['totalMoney'])
    // ...mapState({新名字:原名字})
    // num: function f(){}
  },
  components: {NavBar},
  // created () {
  //   // console.log('vuex的数据',this.$store.state) // this.$router
  //   axios({
  //     url: 'https://www.fastmock.site/mock/37d3b9f13a48d528a9339fbed1b81bd5/book/api/books',
  //     method: 'get'
  //   }).then(res => {
  //     console.log('从接口请求的数据是', res.data.data)
  //     this.$store.commit('updateBooks', res.data.data)

  //   })
  // },
  methods: {
    ...mapMutations(['dobuleNum', 'addN']),
    ...mapMutations('userInfo', ['setSkill']),
    ...mapActions('books', ['getBooks']),
    hDoubleNum(){
      console.log(this)
      this.dobuleNum()
      // this.$store.commit({type: 'dobuleNum'})
      // this.$store.commit('dobuleNum')
      // this.$store.state.num *= 2
    },
    hUpdateLogo() {
      // 目标是：把logo改成:https://www.runoob.com/wp-content/uploads/2016/02/react.png
       this.$store.commit(
         'setLogo', 
         {
           newLogo:'https://www.runoob.com/wp-content/uploads/2016/02/react.png',
           newName:'小王'
         }
         )
    }
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
